<script>

jQuery( function($) {	
	/*****************************************************************\
	|                            Variables                            |
	\*****************************************************************/
	//Variable pour les tâches
	var num_tache;
	//Modifie l'id de chaque chargée
	for(var i=0;i<$("li.page-item").length;i++){
		$("li.page-item").eq(i).attr('id',i+1);
	}
	//Numéro de la prochaine tâche
	num_tache = $("li.page-item").length+1;

	//Variable pour calendrier
	var delta = 19;
	var date_gauche = new Date();
	var date_actuelle = new Date();
	var date_droite = new Date();
	date_droite.setDate(date_droite.getDate()-1);

	/*****************************************************************\
	|                           Calendrier                            |
	\*****************************************************************/
	//Remplir la zone initial Calendrier
	for(var i=0;i<$(".date_calendrier").width()/delta;i++){
		date_droite.setDate(date_droite.getDate()+1);
		//Calendrier jour
		$(".date_calendrier>.calendrier>tbody>tr:last-child").append("<td><div>"+date_droite.getDate()+"</div></td>");
		
		//Calendrier mois
		if(parseInt(date_droite.getDate()) == 1 || i==0){
			$(".date_calendrier>.calendrier>tbody>tr:first-child").append("<td colspan='1'><div>"+parseInt(date_droite.getMonth()+1)+" - "+date_droite.getFullYear()+"</div></td>");
		}else{
			var num_col = parseInt($(".date_calendrier>.calendrier>tbody>tr:first-child>td:last-child").attr("colspan"));
			$(".date_calendrier>.calendrier>tbody>tr:first-child>td:last-child").attr("colspan",num_col+1);			
		}
	}

	//Fonction qui permet de faire défiler les jours du calendrier vers la gauche
	$(".left").bind("click", function(e){
		//S'il y a deja une zone creer à droite
		if(parseInt($("table.calendrier").css("left").replace(/[a-z]*/,""))+$("table.calendrier").width()-$(".date_calendrier").width()>=delta){
			//On ne fait que déplacer
				//Deplacement du calendrier-jour
				$("table.calendrier").css("left",parseInt($("table.calendrier").css("left").replace(/[a-z]*/,""))-delta);	
				//Deplacement du calendrier-tache
				if($("div.calendrier").length!=0){
					$("div.calendrier").css("left",parseInt($("div.calendrier").css("left").replace(/[a-z]*/,""))-delta);	
				}
		}else{
			//On rajoute un bout de zone supplémentaire à droite
				//Pour calendrier-jour-tableau
				date_droite.setDate(date_droite.getDate()+1); 
				$(".date_calendrier>.calendrier>tbody>tr:last-child").append("<td><div>"+date_droite.getDate()+"</div></td>");
								
				//Calendrier mois
				if(parseInt(date_droite.getDate()) == 1){
					$(".date_calendrier>.calendrier>tbody>tr:first-child").append("<td colspan='1'><div>"+parseInt(date_droite.getMonth()+1)+" - "+date_droite.getFullYear()+"</div></td>");
				}else{
					var num_col = parseInt($(".date_calendrier>.calendrier>tbody>tr:first-child>td:last-child").attr("colspan"));
					$(".date_calendrier>.calendrier>tbody>tr:first-child>td:last-child").attr("colspan",num_col+1);			
				}
		
				//Déplacement calendrier-tableau à gauche pour laisser apparaitre la nouvelle
				$("table.calendrier").css("left",parseInt($("table.calendrier").css("left").replace(/[a-z]*/,""))-delta);	

				//Pour zone avec div
				if($("div.calendrier").length!=0){
					$("div.calendrier").width($("div.calendrier").width()+delta);
					$("div.calendrier").css("left",parseInt($("div.calendrier").css("left").replace(/[a-z]*/,""))-delta);	
				}
		}
	});

	//Fonction qui permet de faire défiler les jours du calendrier vers la droite
	$(".right").bind("click", function(e){	
		//S'il y a deja une zone creer à gauche
		if($("table.calendrier").position().left<=-1*delta){
			//On ne fait que déplacer
				$("table.calendrier").css("left",parseInt($("table.calendrier").css("left").replace(/[a-z]*/,""))+delta);	
				if($("div.calendrier").length!=0){
					$("div.calendrier").css("left",parseInt($("div.calendrier").css("left").replace(/[a-z]*/,""))+delta);	
				}
		}else{
			//On rajoute un bout de zone supplémentaire à gauche
				//Pour calendrier-jour-tableau
				var date_temp = parseInt(date_gauche.getDate());
				date_gauche.setDate(date_gauche.getDate()-1);
				$(".date_calendrier>.calendrier>tbody>tr:last-child").prepend("<td><div>"+date_gauche.getDate()+"</div></td>");
				
				//Calendrier mois
				if(date_temp == 1){
					$(".date_calendrier>.calendrier>tbody>tr:first-child").prepend("<td colspan='1'><div>"+parseInt(date_gauche.getMonth()+1)+" - "+date_gauche.getFullYear()+"</div></td>");
				}else{
					var num_col = parseInt($(".date_calendrier>.calendrier>tbody>tr:first-child>td:first-child").attr("colspan"));
					$(".date_calendrier>.calendrier>tbody>tr:first-child>td:first-child").attr("colspan",num_col+1);			
				}
				
				//Pour zone avec div
				if($("div.calendrier").length!=0){
					$("div.calendrier").width($("div.calendrier").width()+delta);

					//Boucle pour chaque élément trouvé
					for(var i=0;i<$("div.calendrier>div").length;i++){
						$("div.calendrier>div").eq(i).css("left",parseInt($("div.calendrier>div").eq(i).css("left").replace(/[a-z]*/,""))+delta);					
					}
				}

		}
	});		
	
	/*****************************************************************\
	|                         Ajout de tâches                         |
	\*****************************************************************/
	
	//Ajout de nouvelle tâche, en activant le drag&drop sur le bouton
	$("#draggable").draggable({
		connectToSortable: '#diagramme',
		helper: 'clone',
	});
	
	//Fonction hover qui permet d'activer le sortable de jQuery UI, afin d'ajouter une nouvelle tâche.
	//	Le sortable jQuery UI sera détruit lors d'un hover out ou si la nouvelle tâche a été ajouté
	$("#draggable").hover(
			 //Hover IN
			 function () {
				  $('#diagramme').sortable(
						{
							placeholder:'current-nesting helper',
							forcePlaceholderSize: true,
							update: function(event, ui) { 
								//Complète avec le code html adéquat
								$('#diagramme>#draggable').html('<div class="tache"><table><tr><td class="nom-tache">Task</td><td class="duree"><div class="zone_calendrier"><div class="calendrier" style="left:'+$("table.calendrier").css("left")+';width:'+$("table.calendrier").width()+'px;"><div class="duree" style="left:'+(parseInt($("table.calendrier").css("left").replace(/[a-z]*/,""))*-1)+'px;"> </div></div></div></td></tr></table></div>');
								//Enlève les classes inutiles et ajoute celles qui en a besoin
								$('#diagramme>#draggable').removeClass("ui-draggable").addClass(" page-item ");
								//Remplace l'id par le prochain numéro de tâche
								$('#diagramme>#draggable').attr("id",num_tache);
								num_tache++;

								//Détruit le sortable jQuery UI
								$('#diagramme').sortable( 'destroy' );

								//Réactualise le sortable Plugin
								activeNestedSortable();
								//Réactualise le draggable et le resizable des tâches	
								activeDraggableResizable();
								//Réactualise le context menu
								activeContextMenu();
								//Sauvegarde du diagramme par ajax
								save();
							 },

						});
											
			  }, 
			  //Hover OUT
			  function () {
				  $('#diagramme').sortable( 'destroy' );
			  }
		);

	/*****************************************************************\
	|   Redimensionnement et déplacement de la durée d'une tâche      |
	\*****************************************************************/
	//Fonction activant le resizable et draggable utilisant jQueryUi
	function activeDraggableResizable(){
		//Redimensionnement de la tâche
		$("div.calendrier>div").resizable({	
	//		containment: 'parent',
			grid: delta,
			handles: 'e,w',
			minWidth: delta,
			stop: function(event,ui){
				//Sauvegarde du diagramme par ajax	
				save();
				},
		});

		//Déplacement de la tâche
		$("div.calendrier>div").draggable({	
			axis:'x',
	//		containment: 'parent',
			grid: [delta,0],
			stop: function(event,ui){ 
				//Sauvegarde du diagramme par ajax	
				save();
				},
		});
	}

	/*****************************************************************\
	|      Utilisation menu contextuel sur le nom de la tâche         |
	\*****************************************************************/
	//Fonction activant le menu contextuel sur une tâche
	//Actions possible: delete
	function activeContextMenu(){
		//Plugin jQuery créant un menu contextuel
		$(".nom-tache").contextMenu({
			menu: "Menu"
			},
			function(action, el, pos) {
				//Si c'est l'action delete
				if(action=="delete"){
					//On affiche une boîte de dialogue pour savoir si on veut supprimer la tâche
					//Condition si la tâche qu'on supprime c'est une catégorie
					if($("#"+el.parents("li").eq(0).attr("id")).find("li").length==0){
						var response = confirm(
						"Do you want delete the task " +el.text()+" ?"
						);
					}else{
						var response = confirm(
						"Do you want delete the categories " +el.text()+" and all the tasks it contains ?"
						);
					}
					
					//Si oui
					if(response){
						//On supprime la tâche
						var id = el.parents("li").eq(0).attr("id");
						$("#"+id).remove();
						//Controle qu'il n'y ait aucune catégorie sans tâche
						parcours($.SortSerialize('diagramme').o.diagramme);
						
						//Sauvegarde du diagramme par ajax
						save();
					}
				}
			});
	}

	/*****************************************************************\
	|        Activation du sortable du plugin NestedSortable          |
	\*****************************************************************/
	//Fonction activant le sortable des tâches à l'aide du plugin nestedsortable
	function activeNestedSortable(){
		$('#diagramme').NestedSortable(
			{
			accept: 'page-item',
			opacity: .8,
			helperclass: 'helper',
			handle: '.nom-tache',
			currentNestingClass: 'current-nesting',
			onChange : function(serialized) {
				var l = serialized[0].o.diagramme;
				parcours(l);
				//Sauvegarde du diagramme par ajax	
				save();
			},
		});
	}
	
	/*****************************************************************\
	|      Edition du nom d'une tâche par double clic sur le nom      |
	\*****************************************************************/
	//Fonction qui permet d'éditer le nom des tâches
	function activeTaskEdit(){
		//Utilisation des événements double click sur la zone pour le nom
		$(".nom-tache").live("dblclick", function(){
			//Contrôle s'il y a déjà un changement de nom en cours
			if(this.childNodes[0].nodeName != "INPUT"){
				//Récupère le nom actuel
				var name = $(this).html();
				//Désactive le sortable
				$('#diagramme').SortableDestroy();
				//Ajoute un champ input text avec comme valeur le nom actuel
				$(this).html("<input type='text' value='"+name+"'/>");
				//Met le focus sur le champ input text
				this.childNodes[0].focus();
				//Validation du nouveau nom à l'aide de la touche "Enter"
				$(this).bind("keypress", function(e){
					if(e.keyCode == 13){
						//Remplace le champ input text par la nouvelle
						$(this).html(this.childNodes[0].value == "" ? "Name required" : HTMLEncode(this.childNodes[0].value));
						//Désactive les événements keypress
						$(this).unbind("keypress");
						//Active le sortable
						activeNestedSortable();
						//Sauvegarde du diagramme par ajax
						save();
					}	
					
				});
				//Validation du nom lorsque le champ input text perd le focus
				$(".nom-tache>input").bind("blur", {obj: this},function(e){
					//Remplace le champ input text par la nouvelle valeur
					$(e.data.obj).html( e.data.obj.childNodes[0].value=="" ? "Name required" : HTMLEncode(e.data.obj.childNodes[0].value)  );
					//Désactive les événements keypress
					$(e.data.obj).unbind("blur");
					//Active le sortable
					activeNestedSortable();
					//Sauvegarde du diagramme par ajax
					save();
				});
			}
		});
	}
	
	/*****************************************************************\
	|                           Sauvegarde                            |
	\*****************************************************************/
	//Fonction qui active toutes les fonctionnalités
	function activateAll(){
		activeDraggableResizable();
		activeNestedSortable();
	}
	
	//Fonction qui désactive toutes les fonctionnalités
	function desactivateAll(){
		$('#diagramme').SortableDestroy();
		$("div.calendrier>div").draggable( 'destroy' );
		$("div.calendrier>div").resizable( 'destroy' );
		
	}
	
	//Fonction qui permet de sauvegarder le diagramme par ajax
	function save(){	
		if("<?php echo $this->isSaveEnable;?>"){
			desactivateAll();//Désactivation de toutes les fonctionnalités
			//Sauvegarde par post en passant le code du diagramme et l'id du projet en cours
			$.post("<?php echo $this->baseUrl(); ?>/planning/saveplanning" , {'dia' : $("#diagramme").html(), 'id' : "<?php echo $this->id;?>"});
			activateAll();	 //Activation de toutes les fonctionnalités
		}
	}
	
	/*****************************************************************\
	|                              Divers                             |
	\*****************************************************************/
	//Fonction qui permet d'échapper le nom de la tâche
	function HTMLEncode(wText){
		if(typeof(wText)!="string"){
		wText=wText.toString();};
		wText=wText.replace(/&/g, "&amp;") ;
		wText=wText.replace(/"/g, "&quot;") ;
		wText=wText.replace(/</g, "&lt;") ;
		wText=wText.replace(/>/g, "&gt;") ;
		wText=wText.replace(/'/g, "&#146;") ;
		return wText;
	};
	
	//Fonction qui permet de remplacer le contenu des catégories en récursif
	function parcours (niveau,isCategorie){
		
		for ( var cle in niveau ){
			if((typeof niveau[cle])=="object"){
				//Appelle récursif
				if("children" in niveau[cle]){
					parcours(niveau[cle],true);
				}else{
					parcours(niveau[cle],false);
				}
			}
			//Si C'est une catégorie
			else if(isCategorie){
				//Modification du nom de class pour indiquer que c'est une catégorie
				if($("#"+niveau[cle]+">div>table>tbody>tr>td:last-child").hasClass("duree")){
					$("#"+niveau[cle]+">div>table>tbody>tr>td:last-child")
							.removeClass("duree")
							.addClass("categorie")
							.html("");
				}
			//Si c'est une tâche
			}else{
				//Contrôle du nom de classe, pour savoir si c'était une catégorie
				if($("#"+niveau[cle]+">div>table>tbody>tr>td:last-child").hasClass("categorie")){
					$("#"+niveau[cle]+">div>table>tbody>tr>td:last-child")
							.removeClass("categorie")
							.addClass("duree")
							.html('<div class="zone_calendrier"><div class="calendrier" style="left:'+$("table.calendrier").css("left")+';width:'+$("table.calendrier").width()+'px;"><div class="duree" style="left:'+(parseInt($("table.calendrier").css("left").replace(/[a-z]*/,""))*-1)+'px;"> </div></div></div>');

					activeDraggableResizable();
				}
			}
  		}
	}

	/*****************************************************************\
	|                              Main                               |
	\*****************************************************************/
	//Active les différents modules
	activeDraggableResizable();
	activeNestedSortable();
	activeTaskEdit();
	activeContextMenu();
});
</script>

<?php
	//Contrôle si on ne se trouve pas dans un diagramme d'un projet
	if(!isset($this->dia)){
	//Sauvegarde désactivé
	$this->isSaveEnable = false;
	//Contenu demo
	 $this->dia = '
		<li style="display: list-item;" class="page-item " id="1"><div class="tache"><table><tbody><tr><td style="-moz-user-select: none;" class="nom-tache">Specifications</td><td class="duree"><div class="zone_calendrier"><div class="calendrier" style="left: -57px; width: 1197px;"><div class="duree" style="left: 57px; position: absolute; top: 4px; width: 209px; height: 12px;"> </div></div></div></td></tr></tbody></table></div><ul style="padding-left: 30px; padding-right: 0px; display: none;" class="page-list"></ul></li><li style="display: list-item;" class="page-item " id="3"><div class="tache"><table><tbody><tr><td style="-moz-user-select: none;" class="nom-tache">Development</td><td class="categorie"></td></tr></tbody></table></div><ul style="padding-left: 30px; padding-right: 0px;" class="page-list"><li style="display: list-item; position: static; left: 43px; top: 36px;" class="page-item " id="2"><div class="tache"><table><tbody><tr><td style="-moz-user-select: none;" class="nom-tache">Database conception</td><td class="duree"><div class="zone_calendrier"><div class="calendrier" style="left: -57px; width: 1197px;"><div class="duree" style="left: 209px; position: absolute; top: 4px; width: 247px; height: 12px;"> </div></div></div></td></tr></tbody></table></div></li><li style="display: list-item; position: static; left: 32px; top: 6px;" class="page-item " id="4"><div class="tache"><table><tbody><tr><td style="-moz-user-select: none;" class="nom-tache">Controllers creation</td><td class="duree"><div class="zone_calendrier"><div class="calendrier" style="left: -57px; width: 1197px;"><div class="duree" style="left: 247px; position: absolute; top: 4px; width: 247px; height: 12px;"> </div></div></div></td></tr></tbody></table></div></li><li style="display: list-item; position: static; left: 29px; top: 4px;" class="page-item " id="5"><div class="tache"><table><tbody><tr><td style="-moz-user-select: none;" class="nom-tache">Diagramm creation</td><td class="duree"><div class="zone_calendrier"><div class="calendrier" style="left: -57px; width: 1197px;"><div class="duree" style="left: 361px; position: absolute; top: 4px; width: 190px; height: 12px;"> </div></div></div></td></tr></tbody></table></div></li></ul></li><li style="display: list-item;" class="page-item " id="7"><div class="tache"><table><tbody><tr><td style="-moz-user-select: none;" class="nom-tache">Documentation</td><td class="duree"><div class="zone_calendrier"><div class="calendrier" style="left: -57px; width: 1197px;"><div class="duree" style="left: 437px; position: absolute; top: 4px; width: 171px; height: 12px;"> </div></div></div></td></tr></tbody></table></div></li><li style="display: list-item;" class="page-item " id="6"><div class="tache"><table><tbody><tr><td style="-moz-user-select: none;" class="nom-tache">Presentation</td><td class="duree"><div class="zone_calendrier"><div class="calendrier" style="left: -57px; width: 1197px;"><div class="duree" style="left: 513px; position: absolute; top: 4px; width: 209px; height: 12px;"> </div></div></div></td></tr></tbody></table></div></li>
	 ';
	}else{
		if(!strcmp($this->dia,"vide")){
			$this->dia="";
		}
		?>
		<h1>Project <?php echo $this->projectName ?></h1>
	<?php }?>
<div id="topElement">
<div id="newTask">
<ul>
	<li id="draggable"><img src="<?php echo $this->BaseUrl()?>/img/newTask.png"/>New task</li>
</ul>
</div>
<div id="navigation">
<div class="bouton left"><img src="<?php echo $this->BaseUrl()?>/img/leftArrow.png"/></div>
<div class="bouton right"><img src="<?php echo $this->BaseUrl()?>/img/rightArrow.png"/></div>
</div>
</div>
<div class="wrap">
<div id="ligne_infos">
<table>
	<tr>
		<td>Task name</td>
		<td>
		<div class="date_calendrier">
		<table class="calendrier">
			<tr></tr>
			<tr></tr>
		</table>
		</div>
		</td>
	</tr>
</table>
</div>


<!--  Pas d'escape, car j'ai besoin d'interpréter les balises html-->
<ul id="diagramme" class="page-list">
		<?php echo ($this->dia);?>
</ul>
</div> 

<ul id="Menu" class="contextMenu">
	<li class="delete">
		<a href="#delete">Delete</a>
	</li>
</ul>


